import type { CanlendarProps}from'./index';
import {Dayjs} from 'Dayjs';
interface MonthCalendarProps extends CanlendarProps{

}
function getAllDays(date:Dayjs)
{
    const startDate= date.startOf('month') // 这个月的1号
    const day= startDate.day()  //1号是星期几
    const daysInfo:Array<{date:Dayjs,currentMounth:boolean}>=new Array(6*7)
    for(let i=0;i<day;i++){     
        daysInfo[i]={
            date:startDate.subtract(day-i,'day'),
            currentMounth:false
        }
    }
    for(let i=day;i<daysInfo.length;i++)
    {
        const calcDate=startDate.add(i-day,'day')
          daysInfo[i]={
            date: calcDate,
            currentMounth:calcDate.month()===date.month(),
          }
    }
   return daysInfo
}

// 渲染allDays
function renderDays(days:Array<{date:Dayjs,currentMounth:boolean}>){
    const rows=[]
    for(let i=0;i<6;i++)
    {
        const row=[]
        for(let j=0;j<7;j++){
            const item=days[i*7+j]
            row[j]=<div className={'calendar-month-body-cell '+(item.currentMounth?'calendar-month-body-cell-crrent':'')}>{item.date.date()}</div>
        }
        rows.push(row)
    }
    return rows.map(row=><div className='calendar-month-body-row'>{row}</div>)
}

function MonthCalendar(props:MonthCalendarProps){
     const weekList=['周日','周一','周二','周三','周四','周五','周六'];
     const allDays=getAllDays(props.value)
    return(
       <div className="calendar-month">
        <div className="calendar-month-week-list">
            {
                weekList.map((week)=>(
                    <div className="calendar-month-week-list-item" key={week}>{week}</div>
                ))
            }
        </div>
        <div className="calendar-month-body">
            {renderDays(allDays)}
        </div>
       </div>
    )
}export default MonthCalendar;